<!-- 
  如何在组合式API中访问 模板引用 ref 标记

      1. 调用 ref(null) 方法创建一个 ref 数据 xxx
      2. 将 xxx 作为 ref 标记的值
      3. 在组件挂载完成之后，通过 xxx.value 就能获取到 DOM对象或组件实例对象
 -->

<template>
  <div>
    <h1>Setup 中 ref 模板引用的使用</h1>
    <p ref="pp">我的天</p>

    <Hello ref="myHello" />
  </div>
</template>

<script>
import { onMounted, ref } from 'vue'
import Hello from './components/Hello.vue'

export default {
  components: {
    Hello
  },

  setup() {
    const pp = ref(null)
    const myHello = ref(null)

    console.log('pp.value', pp.value) // null
    console.log('myHello.value', myHello.value) // null

    onMounted(() => {
      console.log('onMounted pp.value', pp.value)
      console.log('onMounted myHello.value', myHello.value) // {}
    })

    return {
      pp,
      myHello
    }
  }
}
</script>
